<template>
  <el-dialog
    :title="serverInfo.name"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div style="width:100%;height: 30px;padding:5px 5px;line-height: 20px;font-size:20px;background-color: #f5f5f5;margin-bottom:15px;">
        {{pwd}}
    </div>
    <div style="width:100%;height:450px;overflow-y: auto;border: 1px solid #cccccc;padding:20px;">
      <div>
      <div v-if="pwd!='/'" :class="selectedItem==999?'item_selected':''"  style="display: flex; user-select:none;cursor: pointer;" @click="selectItem(999)" @dblclick="gotoPath('<--GOBACK-->')">
          <icon-svg style="width:32px;height:32px;margin-right: 5px;"  name="dir"></icon-svg>
          <div style="width:650px;line-height: 32px;">...</div>
          <div style="width:250px;line-height: 32px;"></div>
          <div style="width:250px;line-height: 32px;"></div>
      </div>
      </div>
      <div>
      <div v-for="(item, index1) in files"  :key="index1">
            <div v-if="item.dir" :class="selectedItem==index1?'item_selected':''"  style="display: flex; user-select:none;cursor: pointer;" @click="selectItem(index1)" @dblclick="gotoPath(item.path)">
                <icon-svg style="width:32px;height:32px;margin-right: 5px;"  name="dir"></icon-svg>
                <div style="width:650px;line-height: 32px;">{{item.nodeName}}</div>
                <div style="width:250px;line-height: 32px;">{{item.attributes.size}}</div>
                <div style="width:250px;line-height: 32px;">{{item.updateDateText}}</div>
            </div>
      </div>
      </div>
      <div>
      <div v-for="(item, index2) in files" :key="index2">
            <div v-if="!item.dir" :class="selectedItem==index2?'item_selected':''"  style="display: flex; user-select:none;cursor: pointer;" @click="selectItem(index2)">
                <icon-svg v-if="item.nodeName.endsWith('.zip')" style="width:30px;height:30px;;margin-right: 5px;"  name="zip"></icon-svg>
                <icon-svg v-else-if="item.nodeName.endsWith('.jpg')" style="width:30px;height:30px;margin-right: 5px;"  name="jpg"></icon-svg>
                <icon-svg v-else-if="item.nodeName.endsWith('.png')" style="width:30px;height:30px;margin-right: 5px;"  name="png"></icon-svg>
                <icon-svg v-else-if="item.nodeName.endsWith('.mp4')" style="width:30px;height:30px;margin-right: 5px;"  name="mp4"></icon-svg>
                <icon-svg v-else style="width:32px;height:32px;margin-right: 5px;"  name="file"></icon-svg>
                <div style="width:650px;line-height: 32px;">{{item.nodeName}}</div>
                <div style="width:250px;line-height: 32px;">{{item.attributes.size}}</div>
                <div style="width:250px;line-height: 32px;">{{item.updateDateText}}</div>
            </div>
      </div>
      </div>
    </div>
    <div slot="footer" style="height:30px;">
      <div style="float:left;display:flex;" v-if="selectedItem!=-1&&selectedItem!=999">
        <el-button size="small" @click="deleteFile(files[selectedItem])">删除</el-button>
        <el-button style="margin-left: 10px;" v-if="files[selectedItem].nodeName.endsWith('.jpg')||files[selectedItem].nodeName.endsWith('.png')" size="small" @click="showImg(files[selectedItem])">查看</el-button>
        <el-button style="margin-left: 10px;" v-else-if="files[selectedItem].nodeName.endsWith('.zip')" size="small" @click="unzipFile(files[selectedItem])">解压</el-button>
        <el-button style="margin-left: 10px;" v-else-if="files[selectedItem].nodeName.endsWith('.mp4')" size="small" @click="playFile(files[selectedItem])">播放</el-button>
        <el-button style="margin-left: 10px;" v-else-if="!files[selectedItem].dir" size="small" @click="editFile(files[selectedItem])">编辑</el-button>

      </div>
      <div style="float:right;display:flex;">
        <el-upload
            ref="upload"
            :action="this.$http.adornUrl(`/fileservice/sftpuploadfile?token=${this.$cookie.get('token')}`)"
            :data='getData()'
            :show-file-list="false"
            :file-list="uploadList"
             :on-success="successHandle">
            <el-button slot="trigger" style="margin-right:5px;" size="small" type="primary">上传文件</el-button>
          </el-upload>
          <el-button size="small" @click="visible = false">关闭</el-button>
      </div>

    </div>
  </el-dialog>
</template>

<script>
  import websocket from '../../../utils/websocket.js'
  import Vue from 'vue'
  import base from '@/utils/base64'
  export default {
    data () {
      return {
        visible: false,
        selectedItem:-1,
        serverInfo:{},
        uploadList:[],
        cmd:"",
        pwd:"",
        files:[]
      }
    },
    methods: {
      init (serverInfo) {
        var that=this
        this.serverInfo = serverInfo
        this.visible = true
        var url = "/sftp/"+this.serverInfo.id+"/"+Vue.cookie.get('token')+"?token="+Vue.cookie.get('token');
        websocket.initWebSocket(url,function onmessage(e){

            var objs = JSON.parse(e.data)
            console.log(objs)
            if(objs.returnCode==0){
              that.selectedItem=-1
              that.files = objs.files
              that.pwd=objs.pwd

            }else{

            }

        });
      },
      gotoPath(path){
         websocket.webSocketSend(path)
      },
      getData(){
        return {pwd:this.pwd,serverId:this.serverInfo.id}
      },
      successHandle (response, file, fileList) {
        if (response && response.code === 0) {
          websocket.webSocketSend(this.pwd)
        } else {
          this.$message.error(response.msg)
        }
      },
      editFile(item){
        this.$http({
          url: this.$http.adornUrl('/fileservice/downloadsftpfile/'+this.serverInfo.id+'/'+new base().encode(item.path))+'?token='+Vue.cookie.get('token'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
            this.$alert('<div style="width:90%;height:400px;margin:2% 5%;overflow-y:auto;overflow-x:hidden;">'+data+'</div>', '文本查看器', {
                      dangerouslyUseHTMLString: true
                    });
        })

      },
      showImg(item){
        var imgURL=this.$http.adornUrl('/fileservice/downloadsftpfile/'+this.serverInfo.id+'/'+new base().encode(item.path))+'?token='+Vue.cookie.get('token')
        this.$alert('<img style="width:90%;margin:2% 5%;" src="'+imgURL+'"></img>', '图片查看器', {
                  dangerouslyUseHTMLString: true
                });
      },
      deleteFile(item){
          this.$confirm(`确定将${item.nodeName}在服务器端删除吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/publish/delSFTPFile'),
              method: 'post',
              params: this.$http.adornParams({'id':this.serverInfo.id,'path':item.path})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    websocket.webSocketSend(this.pwd)
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          })
      },
      playFile(item){
        this.$alert('播啥视频呀，多麻烦呀！', '视频播放器', {
                  dangerouslyUseHTMLString: true
                });
      },
      unzipFile(item){
          this.$confirm(`确定将${item.nodeName}在服务器端解压吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/publish/unzipFile'),
              method: 'post',
              params: this.$http.adornParams({'id':this.serverInfo.id,'path':item.path})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    websocket.webSocketSend(this.pwd)
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          })
      },
      selectItem(index){
        if(this.selectedItem==index){
          this.selectedItem=-1
        }else{
          this.selectedItem=index
        }
      }
    }
  }
</script>
<style>
  .item_selected{
    background-color:#b3cbd3;
  }
</style>
